<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <link rel="stylesheet" href="https://libs.cdnjs.net/twitter-bootstrap/1.4.0/css/bootstrap.css" />

</head>
<body>
<div id="app">
    <p>{{ data }}</p>
    <input type="button" value="get" @click="getData">
    <input type="button" value="post" @click="postData">
    <input type="button" value="jsonp" @click="jsonpData">
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!--vue-resource发送http请求, 依赖vue.js, 该库向Vue挂载 this.$http(.get/post/jsonp..)属性，使用该属性完成请求-->
<script src="https://libs.cdnjs.net/vue-resource/1.5.1/vue-resource.js"></script>

<script>

    function show(name) {
        console.log('invoke by jsonp');
        console.log('hello ', name);
    }

    var vm = new Vue({
        el: '#app',
        data: {
            data:"response data display here."
        },
        methods: {
            getData() {
                // url, then(successCallback, errorCallback) 有跨域问题, 端口不一致
                this.$http.get('http://localhost:9000/data', {responseType: 'text'}).then(result => {
                    console.log(result);
                    if (result.status == 200) {
                        this.data = result.data;
                    }
                    //this.data = result.data;
                }, err => {
                    //this.data = err;
                    console.error(err);
                });
            },
            postData() {
                // url, then(successCallback, errorCallback) 有跨域问题
                // this.$http.post('http://test-okapi.dayuchuhai.com', {tel: '17096832223' }, {
                this.$http.post('http://localhost:9000/data', {tel: '17096832223' }, {
                    responseType: 'json',
                    emulateJSON: true // 设置为表单数据，就是请求头加上了 content-type: application/x-www-form-urlencoded
                }).then(result => {
                    console.log(result);
                    if (result.status == 200) {
                        this.data = result.data;
                    }
                    //this.data = result.data;
                }, err => {
                    //this.data = err;
                    console.error(err);
                });
            },
            jsonpData() {
                // url, then(successCallback, errorCallback)
                this.$http.jsonp(
                    'https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=17096832223'
                ).then(result => {
                    console.log(result);
                    if (result.status == 200) {
                        this.data = result.data;
                    }
                    //this.data = result.data;
                }, err => {
                    //this.data = err;
                    console.error(err);
                });
            }
        },

    });
</script>

<script src="http://localhost:9000/getScript?callback=show"></script>

</body>
</html>
